<template>
	<view class="content">
		<view class="top">
			<view @click="search">
				<van-field v-model="value2" clearable left-icon="search" placeholder="请输入你想搜索的内容" />
			</view>
			<view class="banner">
				<swiper class="swiper" :interval="3000" :duration="1000" circular autoplay="true" indicator-dots="true"
					indicator-active-color="white">
					<swiper-item>
						<view class="swiper-item">
							<image
								src="https://img1.baidu.com/it/u=4207881231,1087312812&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=330"
								mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image
								src="https://img0.baidu.com/it/u=2388652153,1717629581&fm=253&fmt=auto&app=138&f=JPEG?w=1180&h=307"
								mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image
								src="https://img1.baidu.com/it/u=2008905598,1897763847&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=395"
								mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- center -->
			<view class="center">
				<view class="centertop">
					<view class="center1">
						<image src="../../../static/home/species.png" mode=""></image>
						<br />
						钓点
					</view>
					<view class="center1">
						<image src="../../../static/home/sphy.png" mode=""></image>
						<br />
						视频
					</view>
					<view class="center1">
						<image src="../../../static/home/hdzq.png" mode=""></image>
						<br />
						活动
					</view>
					<view class="center1">
						<image src="../../../static/home/Fishing.png" mode=""></image>
						<br />
						钓法
					</view>
					<view class="center1">
						<image src="../../../static/home/iconlyfs_ljj.png" mode=""></image>
						<br />
						饵料
					</view>
				</view>
				<view class="centertop">
					<view class="center1">
						<image src="../../../static/home/jia.png" mode=""></image>
						<br />
						渔家
					</view>
					<view class="center1">
						<image src="../../../static/home/cszb.png" mode=""></image>
						<br />
						直播
					</view>
					<view class="center1">
						<image src="../../../static/home/money.png" mode=""></image>
						<br />
						众筹
					</view>
					<view class="center1" @click="cj">
						<image src="../../../static/home/zuanshi.png" mode=""></image>
						<br />
						夺宝
					</view>
					<view class="center1" @click="quanbu">
						<image src="../../../static/home/qb.png" mode=""></image>
						<br />
						全部
					</view>
				</view>
			</view>
			<view class="reping">
				<view class="left">
					最新活动
				</view>
				<image src="../../../static/home/tuijian.png" style="width: 60rpx;height: 50rpx;" mode=""></image>
				<view class="right">
					大爷钓鱼神操作，简直绝了，快来围观！
				</view>
			</view>

		</view>

		<view class="bot">
			<van-tabs v-model:active="active">
				<van-tab title="热门">
					<view class="contentList">
						<!-- 模板一 -->
						<!-- 			<view class="rows" v-for="item in dataList" :key="index">
							<view class="title" @click="()=>{bitChange(item)}">{{item.title}}</view>
							<view class="timeNum">
								<text>{{ Math.floor((new Date()-new Date(formater())) / 3600000 )}}小时</text>

							</view>
						</view> -->
						<!-- 模板二 （有一张图片的情况）-->
						<!-- 		<view class="rows">
							<view class="twoPicCon">
								<view class="title1">
									广东茂名化橘红:"小地标"撬动大产业;广东茂化橘红"小地标"撬动大产业；广东茂名化橘红:"小地标"撬动大产业；广东茂化橘红"小地标"撬动大产业</view>
								<view class="imgUrl">
									<image
										src="https://p2.itc.cn/q_70/images03/20230222/b857f631e02b45d6920fb9746b9c093b.jpeg"
										alt="" class="imgSize"></image>
								</view>
							</view>
							<view class="timeNum2">3小时前</view>
						</view> -->
						<!-- 模板三 （有多张图片的情况）-->
						<view class="rows" v-for="item in dataList" :key="index" @click="bitChange(item)">
							<view class="title">
								{{item.title}}
							</view>
							<view class="imgPics">
								<view class="imgOne">
									<image src="https://img.redocn.com/sheying/20230530/yediaoyeyutang_12999730.jpg"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image src="https://img.redocn.com/sheying/20230530/yediaoyeyutang_12999730.jpg"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image src="https://img.redocn.com/sheying/20230530/yediaoyeyutang_12999730.jpg"
										alt="" class="imgSize1"></image>
								</view>
							</view>
							<view class="timeNum3">3小时前</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="推荐">
					<view class="contentList">

						<view class="rows" @click="bitChange(item)">
							<view class="title">
								一竿在手,其乐无穷！！
							</view>
							<view class="imgPics">
								<view class="imgOne">
									<image
										src="https://tenfei03.cfp.cn/creative/vcg/nowater800/new/VCG41522115260.jpg?x-oss-process=image/format,webp"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image
										src="https://tenfei01.cfp.cn/creative/vcg/nowarter800/new/VCG41N1133592380.jpg?x-oss-process=image/format,webp"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image
										src="https://alifei05.cfp.cn/creative/vcg/nowater800/new/VCG41108355931.jpg?x-oss-process=image/format,webp"
										alt="" class="imgSize1"></image>
								</view>
							</view>
							<view class="timeNum3">3小时前</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="精选">
					<view class="contentList">
						<view class="rows" @click="bitChange(item)">
							<view class="title">
								春风送暖柳绿花红举竿垂钓旷身怡情
							</view>
							<view class="imgPics">
								<view class="imgOne">
									<image src="https://anci.lf.gov.cn/UploadFiles/91/2018-10/J131840392215146.jpg"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image
										src="https://img.pconline.com.cn/images/photoblog/7/5/7/7/7577640/200811/4/1225732555834.jpg"
										alt="" class="imgSize1"></image>
								</view>
								<view class="imgOne">
									<image src="https://src.aidiao.com/uploads/201806/1529991056bWmz33jo.jpg" alt=""
										class="imgSize1"></image>
								</view>
							</view>
							<view class="timeNum3">3小时前</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	const value2 = ref('123');
	const search = () => {
		uni.navigateTo({
			url: "/pages/tabbar/tabbar-1/search/search"
		})
	}
	const cj = () => {
		uni.navigateTo({
			url: '/pages/tabbar/tabbar-1/duobao/duobao'
		})
	}
	const active = ref(0);
	const dataList = ref([{
			title: '扎克伯格：真正决定人生高度的，是你做事的速度！今天真不错!',
			content: '面对“社交网站”这个足以带动全球性革命的idea的时候，Winklevoss兄弟迟迟不肯动手，而扎克白格选择了像疯狗一般地执行。这是个最好的时代，也是个最坏的时代。决定人生高度的从来不是做事的完美程度，而是做事的速度。当你做事的速度足够快，执行力足够强，你会深信:这的确是一个最好的时代《社交网络》里，讲述了脸书曲折的创业史以及官司纠纷。我对这些都并不惊讶。最最最让我惊讶的，还是扎克伯格这个人尤其是他做事的速度、他的执行力。面对“社交网站”这个足以带动全球性革命的idea的时候，Winklevoss兄弟迟迟不肯动手，而扎克白格选择了像疯狗一般地执行。这是个最好的时代，也是个最坏的时代。决定人生高度的从来不是做事的完美程度，而是做事的速度。当你做事的速度足够快，执行力足够强，你会深信:这的确'

		},
		{
			title: '万里晴空湖光漾,心清气爽钓鱼郎。波光晃动鱼儿跃,不识鱼饵真口粮。咬定佳肴心内悦,贪食命丧钓饵香。人生过往须心记,勿学鱼儿贪念想。',
			content: '面对“社交网站”这个足以带动全球性革命的idea的时候，Winklevoss兄弟迟迟不肯动手，而扎克白格选择了像疯狗一般地执行。这是个最好的时代，也是个最坏的时代。决定人生高度的从来不是做事的完美程度，而是做事的速度。当你做事的速度足够快，执行力足够强，你会深信:这的确是一个最好的时代《社交网络》里，讲述了脸书曲折的创业史以及官司纠纷。我对这些都并不惊讶。最最最让我惊讶的，还是扎克伯格这个人尤其是他做事的速度、他的执行力。面对“社交网站”这个足以带动全球性革命的idea的时候，Winklevoss兄弟迟迟不肯动手，而扎克白格选择了像疯狗一般地执行。这是个最好的时代，也是个最坏的时代。决定人生高度的从来不是做事的完美程度，而是做事的速度。当你做事的速度足够快，执行力足够强，你会深信:这的确'

		}
	])
	const bitChange = (item) => {
		// console.log("进行页面跳转，传过来的数据是:", item);
		uni.navigateTo({
			url: '/pages/tabbar/tabbar-1/detail/detail?item=' + JSON.stringify(item)
		});
	}
	const quanbu = () => {
		uni.navigateTo({
			url: '/pages/tabbar/tabbar-1/quanbu/quanbu'
		});
	}
</script>
<style lang="scss">
	.content {
		background-color: #f0f0f2;
		height: 100 vh;

		.top {
			background-color: white;

			.reping {
				display: flex;
				padding: 1%;
				text-align: center;
				justify-content: space-evenly;

				.left {
					font-size: 26rpx;
					font-weight: bold;
				}

				.right {
					font-size: 26rpx;
				}
			}

			.van-dropdown-menu {
				width: 20rpx;
			}

			.banner {
				width: 100%;


				.swiper {
					height: 350rpx;
				}

				.swiper-item {
					display: block;
					height: 350rpx;
					line-height: 350rpx;
					text-align: center;
				}

				.swiper-list {
					margin-top: 40rpx;
					margin-bottom: 0;
				}

				.swiper image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.center {
			// background-color: red;
			height: 25 vh;
			width: 100%;
			margin: 10rpx;
			margin-top: 20rpx;

			.centertop {
				justify-content: space-around;
				display: flex;

				.center1 {
					margin: 10rpx;
					text-align: center;
					font-size: 25rpx;
					font-weight: bold;

					image {
						width: 75rpx;
						height: 75rpx;

					}
				}
			}

		}

		.bot {
			margin-top: 3%;

			.contentList {
				padding: 20rpx;
				text-align: left;
			}

			.timeNum {
				font-size: 22rpx;
				color: #b0b0be;
				// position: relative;
				// top: 20rpx;
				margin-top: 10rpx;
			}

			.timeNum2 {
				font-size: 22rpx;
				color: #b0b0be;
				margin-top: 10rpx;
			}

			.timeNum3 {
				font-size: 22rpx;
				color: #b0b0be;
			}

			.rows {
				min-height: 130rpx;
				border-bottom: 1 px solid #ececec;
				margin-top: 10rpx;
				width: 100%;

				.title {
					width: 700rpx;
					overflow: hidden; // 超出隐藏
					text-overflow: ellipsis; // 省略号
					// white-space:nowrap; // 强制一行显示
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
				}


			}

			.twoPicCon {
				display: flex;
				margin-top: 10rpx;

				.title1 {
					width: 500rpx;
					height: 85rpx;
					// overflow: hidden; // 超出隐藏
					// text-overflow: ellipsis; // 省略号
					text-overflow: -o-ellipsis-lastline;
					// overflow: hidden; //溢出内容隐藏
					// text-overflow: ellipsis; //文本溢出部分用省略号表示
					// // display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					display: -webkit-box;
					/* 设置为需要显示的行数 */
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: keep-all;
				}

				.imgUrl {
					margin-left: 15rpx;
					width: 370rpx;
					height: 100%;
				}
			}


			.imgSize {
				width: 200rpx;
				height: 180rpx;
			}

			.imgPics {
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
			}

			.imgSize1 {
				width: 230rpx;
				height: 150rpx;
			}

			.imgOne {

				margin-left: 3rpx;
				margin-right: 3rpx;
			}
		}
	}
</style>